import React, { Component } from 'react';
import './App.css';

import HomeContainer from './views/home/home.jsx'
import AboutContainer from './views/about/about.jsx'
import MovieContainer from './views/movie/movieContainer.jsx'
//导入react路由
import { HashRouter, Route, Link, withRouter } from 'react-router-dom'
//导入antd组件
import { Layout, Menu, Breadcrumb } from 'antd';
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
const { Header, Content, Footer } = Layout;

const breadcrumbNameMap = {
  '/home': '首页',
  '/movie': '电影',
  '/movie/in_theaters':'正在热映',
  '/movie/coming_soon':'即将上映',
  '/movie/top250':'top25',
  '/movie/detail':'电影详情',
  '/about': '关于'
};
const Home = withRouter((props) => {
  const { location } = props;
  console.log(props)
  const pathSnippets = location.pathname.split('/').filter(i => i);
  console.log(pathSnippets)
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (
      <Breadcrumb.Item key={url}>
        <Link to={url}>
          {breadcrumbNameMap[url]}
        </Link>
      </Breadcrumb.Item>
    );
  });
  const breadcrumbItems = [(
    <Breadcrumb.Item key="home">
      <Link to="/">豆瓣电影</Link>
    </Breadcrumb.Item>
  )].concat(extraBreadcrumbItems);
  return (
    <Layout className="layout" style={{ height: '100%' }}>
      <Header>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={[window.location.hash.split('/')[1] || 'home']}
          style={{ lineHeight: '64px' }}
        >
          <Menu.Item key="home"><Link to='/home'>首页</Link></Menu.Item>
          <Menu.Item key="movie"><Link to='/movie'>电影</Link></Menu.Item>
          <Menu.Item key="about"><Link to='/about'>关于</Link></Menu.Item>
        </Menu>
      </Header>
      <Content style={{ padding: '0 10px' }}>
        <Breadcrumb>
          {breadcrumbItems}
        </Breadcrumb>
        <div style={{ background: '#fff', padding: 0, minHeight: 280 }}>
          <Route path='/home' onLeave={NProgress.start()} component={HomeContainer}></Route>
          <Route path='/movie' onLeave={NProgress.start()} component={MovieContainer}></Route>
          <Route path='/about' onLeave={NProgress.start()} component={AboutContainer}></Route>
        </div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>
        Ant Design ©2018 Created by Ant UED
      </Footer>
    </Layout>
  );
});
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return (
      <HashRouter>
        <Home />
      </HashRouter>
    );
  }
}

export default App;
